<template>
  <div class="box-list">
    <div class="box-list_head">
      <el-form :inline="true" :model="formInline" size="small">
        <el-form-item label="日期：">
          <el-date-picker
            v-model="formInline.time"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            unlink-panels
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="text" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="box-list_content">
      <div class="box-item" v-for="item in dataList" v-if="dataList.length>0">
        <div class="box-item_head" @click="goingClick(item)">
          <div class="box-item_title">{{item.title}}</div>
          <span>{{item.time}}</span>
        </div>
        <p class="box-item_detail">{{item.detail}}
          <i class="isdelay el-icon-time" style="font-size: 12px" v-if="operate=='hisTask' ">

            {{item.endTime}}
          </i>
          <i class="isdelay el-icon-time" style="font-size: 12px" v-else>

            {{item.createTime}}
          </i>
        </p>
      </div>
      <p v-else>暂无数据</p>
    </div>
    <div class="box-pagination">
      <el-pagination
        background
        small
        @current-change="handleCurrentChange"
        :current-page="queryForm.page"
        :page-size="queryForm.pageSize"
        layout="total, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog fullscreen :visible.sync="rundialogGoingVisible" @close='closeHisDialog'>
      <div>
        <task-details :pid="hisProcessInstanceId" @closeEvent="closeHisEvent($event)"></task-details>
      </div>
    </el-dialog>
    <el-dialog fullscreen :visible.sync="runTaskdialogGoingVisible" @close='closeRunDialog'>
      <div>
        <handle @closeEvent="closeRunEvent($event)" :taskParam="taskId"></handle>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getRuTaskData, getHisTaskData, getMeToData, getToMeData, getTaskDelayedData} from "@/api/index"
  import taskDetails from '@/views/bpm/histask/details'
  import handle from '@/views/bpm/task/handle'

  export default {
    name: 'indexcard',
    components: {
      taskDetails,
      handle
    },
    data() {
      return {
        hisProcessInstanceId: "",
        rundialogGoingVisible: false,
        taskId: "",
        runTaskdialogGoingVisible: false,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        total: 0,

        queryForm: {
          page: 1,
          pageSize: 10
        },
        formInline: {
          time: [],
          page: 1,
          limit: 10,
          typeKey: "",
          endTime: "",
          startTime: "",
          start: "",
          end: "",
        },

        dataList: []
      }
    },
    props: {
      operate: {
        type: String,
        default: "ruTask"
      },
      typeKey: {
        type: String,
        default: ""
      },
      refreshTaskData: {
        type: Boolean,
        default: false
      },
    },
    methods: {
      closeRunEvent: function (data) {
        if (data) {
          this.runTaskdialogGoingVisible = false
          this.initData();
        }
      },
      closeHisEvent: function (data) {
        if (data) {
          this.rundialogGoingVisible = false
        }
      },
      closeRunDialog: function () {
        this.taskId = ""
      },
      closeHisDialog: function () {
        this.hisProcessInstanceId = ""
      },
      goingClick(data) {
        if (data) {
          if (this.operate == 'ruTask') {
            this.taskId = data.id;
            this.runTaskdialogGoingVisible = true;
          } else if (this.operate == 'hisTask') {
            this.hisProcessInstanceId = data.processInstanceId
            this.rundialogGoingVisible = true;

          } else if (this.operate == 'toMe') {
            this.hisProcessInstanceId = data.procId
            this.rundialogGoingVisible = true;

          } else if (this.operate == 'meTo') {
            this.hisProcessInstanceId = data.procId
            this.rundialogGoingVisible = true;


          } else if (this.operate == 'taskDelayed') {
            this.taskId = data.id;
            this.runTaskdialogGoingVisible = true;
          }


          //
        }

      },
      onSubmit() {
        this.formInline.page = 1
        this.queryForm.page = 1
        if (this.operate != 'ruTask') {
          if (this.formInline.time) {
            this.formInline.start = this.formInline.time[0]
            this.formInline.end = this.formInline.time[1]
          } else {
            this.formInline.start = ""
            this.formInline.end = ""
          }
        } else {
          if (this.formInline.time) {
            this.formInline.startTime = this.formInline.time[0]
            this.formInline.endTime = this.formInline.time[1]
          } else {
            this.formInline.startTime = ""
            this.formInline.endTime = ""
          }
        }

        this.initData()
      },
      restartForm() {
        this.formInline.start = ""
        this.formInline.page = 1
        this.queryForm.page = 1
        this.formInline.end = ""
        this.formInline.startTime = ""
        this.formInline.endTime = ""
        this.formInline.time = []
      },
      handleCurrentChange(val) {
        this.formInline.page = val
        this.initData()
      },
      initData() {
        if (this.operate == 'ruTask') {
          //待办
          getRuTaskData(this.formInline).then((response) => {
            if (response.code == 0) {
              var data = response.data
              data.forEach(item => {
                if (item.preOpinion) {
                  var str=item.preOpinion;
                  var new_playerName = "";
                  var realLength = 0, len = str.length, charCode = -1;
                  for (var i = 0; i < len; i++) {
                    charCode = str.charCodeAt(i);
                    if (charCode >= 0 && charCode <= 128) realLength += 1;
                    else realLength += 2;
                  }
                  if (str.length > 18) {
                    new_playerName = item.preOpinion.substring(0, 18);
                    new_playerName += "..."
                  }
                  else {
                    new_playerName = item.preOpinion;
                  }
                  item.detail = "意见:" + new_playerName
                } else {
                  item.detail = "意见:"
                }
                if (item.preUserName) {
                  item.title = item.preUserName + "『送交给我』,任务标题:" + item.taskTitle;

                } else {
                  item.title = '暂无标题'
                }
              })
              this.dataList = data;
              this.total = parseInt(response.count);
            } else {
            }

          })

        } else if (this.operate == 'hisTask') {
          //待办
          getHisTaskData(this.formInline).then((response) => {
            if (response.code == 0) {
              var data = response.data
              data.forEach(item => {

                item.detail = "意见:" + (item.opinion == undefined ? "暂无" : item.opinion);
                item.title = item.taskTitle;

              })
              this.dataList = data;
              this.total = parseInt(response.count);
            } else {
            }

          })
        } else if (this.operate == 'taskDelayed') {
          getTaskDelayedData(this.formInline).then((response) => {
            if (response.code == 0) {
              var data = response.data
              data.forEach(item => {
                item.detail = "意见:" + item.preOpinion;
                item.title = item.preUserName + "『送交给我』" + "," + item.taskTitle;

              })
              this.dataList = data;
              this.total = parseInt(response.count);
            } else {
            }

          })

        } else if (this.operate == 'toMe') {
          getToMeData(this.formInline).then((response) => {
            if (response.code == 0) {
              var data = response.data
              data.forEach(item => {
                item.detail = "意见:" + item.opinion;
                item.title = item.previousAssigneeName + "『转办给我』";

              })
              this.dataList = data;
              this.total = parseInt(response.count);
            } else {
            }

          })

        } else if (this.operate == 'meTo') {
          //我的转办
          getMeToData(this.formInline).then((response) => {
            if (response.code == 0) {
              var data = response.data
              data.forEach(item => {
                item.detail = "意见:" + item.opinion;
                item.title = "我转办给『" + item.newAssigneeName + "』";

              })
              this.dataList = data;
              this.total = parseInt(response.count);
            } else {
            }

          })

        }
      },

    },
    created() {

      if (this.operate) {
        //执行逻辑
        this.formInline.typeKey = "";
        this.initData();
      }
    },

    watch: {
      refreshTaskData(newData, oldData) {
      },

      refreshTaskData() {
        this.formInline.typeKey = ""
        this.restartForm();
        this.initData();
      },
      operate() {
        if (this.operate) {

          this.formInline.typeKey = ""
          this.restartForm();
          this.initData();
        }
      },
      typeKey() {
        this.restartForm()
        this.formInline.typeKey = this.typeKey
        this.initData();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box-list {
    .box-list_head {
      background: #f4f7fd;
      padding: 5px 0px;

      .el-form-item {
        margin-bottom: 0px;

        ::v-deep.el-date-editor--daterange {
          max-width: 250px;
        }
      }
    }

    .box-list_content {
      font-size: 12px;
      color: #666;
      padding: 0px 20px;
      height: 350px;
      overflow-y: auto;

      .box-item {
        cursor: pointer;
        box-sizing: border-box;
        padding: 10px 0px 10px 10px;
        border-bottom: 1px solid #dedede;

        .box-item_head {
          display: flex;
          line-height: 24px;
          margin-bottom: 5px;

          .box-item_title {
            flex: 1;
            font-size: 14px;
            color: #333;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          span {
            display: inline-block;
          }
        }

        .box-item_detail {
          line-height: 1.7;
          position: relative;
          padding-right: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          .isdelay {
            font-size: 18px;
            z-index: 3;
            position: absolute;
            top: 50%;
            right: 0px;
            transform: translate(-0%, -50%);
          }
        }
      }
    }

    .box-pagination {
      background: #f4f7fd;
      padding: 5px 20px;
    }
  }
</style>
